<template>
  <div>
	<myheader></myheader>

	<section class="cart text-center">
		<div class="container">
			<!-- <div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div> -->
			<div class="row">
				<div class="col-12 text-center">
					<h2 class="mt-5 mb-2">您的购物车</h2>
					<p class="mb-5"><span class="primary-color">{{ cart_count() }}</span> 件商品在您的购物车内</p>
					<table id="cart" class="table table-condensed" >
						<thead>
							<tr>
								<th style="width:60%">商品名称</th>
								<th style="width:12%">价格</th>
								<th style="width:10%">商品数量</th>
								<th style="width:16%"></th>
							</tr>
						</thead>
						<tbody v-for="(cart, index) in cart_list" :key="index">
							<tr>
								<td data-th="Product">
									<div class="row">
										<div class="col-md-3 text-left">
											<img :src="'http://localhost:8000/static/upload/' + cart.img" alt="" class="img-fluid">
										</div>
										<div class="col-md-9 text-left mt-sm-2">
											<h4>{{ cart.name }}</h4>
											<p>York &amp; Smith</p>
										</div>
									</div>
								</td>
								<td data-th="Price">${{ cart.price }}</td>
								<td data-th="Quantity">
									<!-- <input type="number" class="form-control text-center" :value='cart.num''> -->
									<input type="number" class="form-control text-center" v-model="cart.num">
								</td>
								<td class="actions" data-th="">
									<div class="text-right">
										<button @click="change_num(index,'+')" class="btn btn-white btn-md mb-2"><i class="fas fa-sync">+</i></button>
										<button @click="change_num(index,'-')" class="btn btn-white btn-md mb-2"><i class="fas fa-trash">-</i></button>
									</div>
								</td>
							</tr>
							
						</tbody>
					</table>
					<div class="float-right text-right">
						<h4>结算价格:</h4>
						<h1>${{ cart_price() }}</h1>
						<p>(不包含运费)</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> 继续购物</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div>
		</div>
	</section>
	
	<myfooter></myfooter>	
    
  </div>
  
</template>


 
<script>
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';
  
import {config,formatXml} from '../config.js'

export default {
  data () {
    return {
      msg: "这是一个变量",
	  //购物车变量
		cart_list:[],
    }
  },
  mounted:function(){

	  //初始化购物车
	this.init_cartlist()

   
  
},
//注册组件标签
components:{
		'myheader': myheader,
		'myfooter': myfooter,

  },
  methods:{
	  	//初始化购物车逻辑
	init_cartlist:function(){
		var cart = localStorage.getItem("cart")
		//将localStorage数据赋值给cart_list
		if(cart){
			this.cart_list = JSON.parse(localStorage.getItem("cart"))
			console.log(this.cart_list);

		}
		

	},

	//购物车数量增减
	change_num:function(index,type){
		//累加操作
		if(type == "+"){
			this.cart_list[index]['num']++;

		}
		else{
			if(this.cart_list[index]['num'] > 1){
				this.cart_list[index]['num']--;

			}else{
				// this.$Message("商品数量不能为零")
				this.delete_one(index)

			}
			
		}
		//状态续存
		localStorage.setItem("cart",JSON.stringify(this.cart_list));

	},

	//封装删除整行逻辑
	delete_one:function(index){
		this.cart_list.splice(index,1);

	},

	//计算购物车内商品总数
	cart_count:function(){
		var total = 0;
		for(var i=0,l=this.cart_list.length;i<l;i++){
			//获得总数量
			total += this.cart_list[i].num;
			
		}

		//返回总数量
		return total;

	},

	//计算商品总价格
	cart_price:function(){
		var total = 0;
		for(var i=0,l=this.cart_list.length;i<l;i++){
			//获得总数量
			total += (this.cart_list[i].num * this.cart_list[i].price);
			
		}

		//返回总数量
		return total;

	},

     
  }
}


</script>
 
<style>



</style>